import {Button, Input, Modal, Radio} from "antd";
import {useEffect} from "react";

/**
 * 用户基础信息编辑模态框
 *
 * @returns {JSX.Element}
 * @constructor
 */
const UserBasicEdit = (props) => {

    const {
        editUserModalVisible,
        setEditUserModalVisible,
        userDetail,
        editUserParam,
        setEditUserParam,
        editUserById
    } = props;

    /**
     * 关闭基础资料编辑模态框
     */
    const closeUserBasicEditModal = () => {
        setEditUserModalVisible({
            ...editUserModalVisible,
            basicEdit: false
        });
        setEditUserParam({});
    }

    /**
     * 组件打开后, 立刻获取用户基础信息, 写入到输入框中
     */
    useEffect(() => {
        if (!editUserModalVisible.basicEdit) {
            return;
        }
        setEditUserParam({
            userNickname: userDetail.userNickname,
            userGender: userDetail.userGender,
            userGenderValue: userDetail.userGenderValue
        })
        // eslint-disable-next-line
    }, [editUserModalVisible.basicEdit]);

    return (
        <Modal
            open={editUserModalVisible.basicEdit}
            title="用户基础信息编辑"
            onCancel={() => closeUserBasicEditModal()}
            footer={
                <div style={{padding: '16px 24px', borderTop: '1px solid #f0f0f0', backgroundColor: '#fff'}}>
                    <Button
                        type="primary"
                        style={{
                            borderRadius: '8px',
                            padding: '8px 20px',
                            backgroundColor: '#4096ff',
                            borderColor: '#4096ff',
                            fontSize: '14px',
                            transition: 'all 0.2s'
                        }}
                        onMouseEnter={(e) => {
                            e.currentTarget.style.backgroundColor = '#69b1ff';
                            e.currentTarget.style.borderColor = '#69b1ff';
                        }}
                        onMouseLeave={(e) => {
                            e.currentTarget.style.backgroundColor = '#4096ff';
                            e.currentTarget.style.borderColor = '#4096ff';
                        }}
                        onClick={() => {
                            editUserById({
                                userNickname: editUserParam.userNickname,
                                userGender: editUserParam.userGender,
                                userIntroduction: userDetail.userIntroduction
                            });
                            closeUserBasicEditModal();
                        }}
                    >
                        编辑
                    </Button>
                    <Button
                        danger={true}
                        style={{
                            marginLeft: '12px',
                            borderRadius: '8px',
                            padding: '8px 20px',
                            backgroundColor: '#fff',
                            color: '#ff4d4f',
                            borderColor: '#ff4d4f',
                            fontSize: '14px',
                            transition: 'all 0.2s'
                        }}
                        onClick={() => closeUserBasicEditModal()}
                        onMouseEnter={(e) => {
                            e.currentTarget.style.backgroundColor = '#fff5f5';
                        }}
                        onMouseLeave={(e) => {
                            e.currentTarget.style.backgroundColor = '#fff';
                        }}
                    >
                        关闭
                    </Button>
                </div>
            }
        >
            {/* 表单容器 */}
            <div style={{display: 'flex', flexDirection: 'column', gap: '20px', padding: '12px'}}>
                {/* 昵称输入项 */}
                <div style={{display: 'flex', flexDirection: 'column', gap: '8px', marginTop: '8px'}}>
                    <label style={{
                        fontSize: '14px',
                        color: '#595959',
                        fontWeight: 500
                    }}>
                        用户昵称：
                    </label>
                    <Input
                        value={editUserParam.userNickname}
                        onChange={(e) => {
                            setEditUserParam({
                                ...editUserParam,
                                userNickname: e.target.value
                            });
                        }}
                        style={{
                            borderRadius: '8px',
                            height: '40px',
                            padding: '0 12px',
                            border: '1px solid #d9d9d9',
                            transition: 'border-color 0.2s',
                            '&:focus': {
                                borderColor: '#4096ff',
                                boxShadow: '0 0 0 2px rgba(64, 150, 255, 0.2)'
                            }
                        }}
                    />
                </div>

                {/* 性别选择项 */}
                <div style={{display: 'flex', flexDirection: 'column', gap: '8px'}}>
                    <label style={{
                        fontSize: '14px',
                        color: '#595959',
                        fontWeight: 500
                    }}>
                        用户性别：
                    </label>
                    <Radio.Group
                        value={editUserParam.userGender}
                        options={[
                            {value: 1, label: '男'},
                            {value: 2, label: '女'}
                        ]}
                        onChange={(e) => {
                            setEditUserParam({
                                ...editUserParam,
                                userGender: e.target.value
                            });
                        }}
                        style={{
                            paddingLeft: '8px',
                            paddingRight: '8px',
                            display: 'flex',
                            gap: '20px'
                        }}
                    />
                </div>
            </div>
        </Modal>
    )
}
export default UserBasicEdit;